<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Minio-test</title>
    <script src="/webjars/jquery/3.7.1/jquery.js"></script>
    <script type="text/javascript">
        function getBucketList() {
            $.ajax({
                url: "/getBucketList",
                type: "get",
                success: function (data) {
                    $("#bucketNameList").html(data);
                }
            });
        }

        function getFileList(bucketName) {
            $.ajax({
                url: "/listFilesByBucket",
                type: "post",
                data: {
                    bucketName: bucketName
                },
                success: function (data) {
                    $("#fileList").html(data);
                }
            });
        }

        function createBucket(bucketName) {
            $.ajax({
                url: "/createBucket",
                type: "post",
                data: {
                    bucketName: bucketName
                },
                success: function (data) {
                    alert(data);
                }
            });
        }
    </script>
</head>
<body>
<h1>Minio文件管理测试</h1>
<hr/>
<button type="button" onclick="getBucketList()">获取bucket列表</button>
<p>Bucket列表</p>
<div id="bucketNameList" th:fragment="bucketNameList">
    <ul th:each="item : ${bucketNameList}">
        <li th:text="${item}"></li>
    </ul>
    <hr/>

    <p>选择bucket，显示文件列表</p>
    <select id="bucketName" onchange="getFileList(this.value)" height="30px">
        <option th:each="item : ${bucketNameList}" th:value="${item}" th:text="${item}"></option>
    </select>
    </br>
    <div id="fileList"></div>
</div>

<hr/>
<p>创建bucket</p>
<p><input type="text" id="newBucketName" name="bucketName"></p>
<button type="button" onclick="createBucket($('#newBucketName').val())">创建bucket</button>

</br>
</br>
<a href="/uploadFileView">上传文件</a>
</br>
</br>
<a href="/downloadFileView">下载文件</a>

</body>
</html>
